<template>
	<el-dialog
		v-model="dialogVisible"
		:title="isAdd ? '添加协议' : '编辑协议'"
		width="85%"
		:before-close="handleClose"
		v-loading="loading"
		destroy-on-close
	>
		<div>
			<el-tabs type="border-card" v-if="isAdd" v-model="tabCu">
				<el-tab-pane label="从模板库中选择" :name="0">
					<agreementTemp :platType="props.platType" :dataType="props.dataType" @submit="submit"></agreementTemp>
				</el-tab-pane>
				<el-tab-pane label="自行创建" :name="1">
					<agreementInput
						:platType="props.platType"
						:dataType="props.dataType"
						:role="props.role"
						:data="form"
						@handle-close="handleClose"
					></agreementInput>
				</el-tab-pane>
			</el-tabs>
			<div v-else>
				<agreementInput :platType="props.platType" :dataType="props.dataType" :data="form" @handle-close="handleClose"></agreementInput>
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch } from 'vue';
import agreementInput from './agreementInput.vue';
import agreementTemp from './agreementTemp.vue';
import { getAgreementInfo, getSiteAgreementInfo } from '/@/api/api';

const tabCu = ref(0);
const loading = ref(false);
const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => {},
	},
	dataType: {
		type: Number,
		default: () => 0,
	},
	platType: {
		type: Number,
		default: () => 0,
	},
	isAdd: {
		type: Boolean,
		default: () => true,
	},
	role: {
		type: String,
		default: () => '',
	},
});

const dialogVisible = ref(false);
const form = ref('');

watch(
	() => props.dialogVisible,
	(val) => {
		dialogVisible.value = val;
		if (val) {
			// if (form.value.content) form.value.content = '';
			if (!props.isAdd) {
				// form.value = JSON.parse(JSON.stringify(props.row));
				getAgreementInfoFn();
			}
		}
	}
);

async function getAgreementInfoFn() {
	loading.value = true;
	if (props.role == 'admin') {
		let { code, data } = await getAgreementInfo({
			id: props.row.id,
		});
		if (code == 200) {
			loading.value = false;
			form.value = JSON.stringify(data.info);
		}
	} else {
		let { code, data } = await getSiteAgreementInfo({
			id: props.row.id,
		});
		if (code == 200) {
			loading.value = false;
			form.value = JSON.stringify(data.info);
		}
	}
}

function submit(item) {
	console.log('🚀 ~ submit ~ item:', item);
	form.value = JSON.stringify(item);
	tabCu.value = 1;
}

const emit = defineEmits(['handleClose']);

function handleClose() {
	// form.value = {};
	emit('handleClose');
}
</script>

<style>
.desc_label {
	width: 20px;
}
</style>
